<template>
  <div class="my-template">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="标题" prop="sql_title">
        <el-input v-model="ruleForm.sql_title"></el-input>
      </el-form-item>

      <el-form-item label="数据库" prop="database">
        <el-select
          class="my-put"
          v-model="optionsDatabaseId"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入数据库名称"
          :remote-method="getDatabaseInfo"
          :loading="loading">
          <el-option
            v-for="(item,index) in database_info"
            :key="index"
            :label="item.db_name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <!--<el-form-item label="模板sql" prop="sql_data_str">-->
        <!--<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10}" v-model="ruleForm.sql_data_str"></el-input>-->
      <!--</el-form-item>-->

      <el-form-item label="模板sql" prop="sql_template">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 20}" v-model="ruleForm.sql_template"></el-input>
      </el-form-item>

      <el-form-item label="入参模板" prop="db_name">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10}" v-model="ruleForm.sql_push_fields"></el-input>
      </el-form-item>

      <el-form-item label="出参模板" prop="db_ip">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10}" v-model="ruleForm.sql_pull_fields"></el-input>
      </el-form-item>

      <el-form-item label="合成sql" prop="sql_data">
        <el-input disabled type="textarea" :autosize="{ minRows: 2, maxRows: 20}" v-model="ruleForm.sql_data"></el-input>
      </el-form-item>

      <el-form-item label="执行结果" prop="sql_test_data">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="" :disabled="true"
                  v-model="ruleForm.sql_test_data"></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="ruleForm.status" placeholder="请选择状态" class="my-put">
          <el-option
            v-for="(item,index) in optionsCommon"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">保存</el-button>
        <el-button type="primary" @click="testObj()">测试</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
  export default {
    name: 'Addsql',
    data() {
      return {
        optionsCommon: [],  // 存储CommonChoices实际数据的列表

        loading: false,
        database_info: [], // 数据列表，获取1000条项目数据
        optionsDatabaseId: [],

        EditUrl: this.$http.sqlURL,  // get编辑的URL
        EditIdStr: 'sqldetail_id',  // 模块id字符串
        pushObjName: 'sql',  // 成功后跳转的路由

        fields:['sql_test_data'],
        notSubmitFields: [
          'sql_test_data'
        ],

        // 文件上传
        // fileList: [],
        // 默认不是FormData格式
        FormDataStatus:false,

        ruleForm: {
          id:'',
          sql_title: '',//标题
          database: '',//所属数据库
          sql_push_fields: '',//入参
          sql_pull_fields: '',//出参
          sql_data: '', //真实sql
          sql_template:'',
          sql_test_data: '',//测试结果
          status: '',//状态
          database_info: {}, // 数据
        },  //
        rules: {}
      };
    },
    created() {
      this.getEditData();   // get回将要编辑的数据
      this.optionsCommon = this.getChoices.common;
    },
    methods: {
      // 测试sql功能
      testObj() {
        let queryData = {
          id: this.ruleForm.id
        };
        this.$http.getApiFunc(this.$http.getApiStatus)(this.$http.testSqlURL, queryData)
          .then(res => {
            this.$alert(res.data.msg, '提示', {
              confirmButtonText: '确定'
            });
            // this.$router.go(0);
          })
          .catch(err => {
            console.log(err);
          });
      },

      // 提交数据
      submitForm() {
        // this.FormDataStatus = true;
        this.$myTool.submitForm(this);
      },

      // get回将要编辑的数据
      getEditData() {
        this.$myTool.getEditData(this)
      },

      // 数据库信息搜索
      getDatabaseInfo(query) {
        this.$myTool.getObjList(this, this.$http.databaseURL, this.database_info, query);
        console.log(this.database_info)
      },

      // get将要编辑的数据
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },

    watch: {
      'ruleForm.database_info': function (value) {
        if (value) {
          this.optionsDatabaseId.push(value.id);
          this.database_info.push(value);
        } else {
          this.optionsDatabaseId = [];
          this.database_info = [];
        }
      },

      optionsDatabaseId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
        this.ruleForm.database = value[0];
      },
    },

    computed: {
      getChoices() {
        return this.$store.state.choicesInfo
      }
    },
  }
</script>

<style scoped>
  .my-template{
    background-color: #FFFFFF;
    padding: 20px;
  }
  .my-l-butt{
    margin: 0 0 10px;
    float: left;
  }
  .my-r-float{
    float: right;
  }
  .my-put{
    width:100%;
  }
  .my-succes{
    color: #13ce66
  }
  .my-failure{
    color: red;
  }
  .my-no-in{
    color: sandybrown;
  }
  .paging {
    padding-top: 20px;
  }

  .mytable {
    /*width: 120px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

</style>
